<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <style>
      .search {
        position: relative;
      }
      .js-input {
        width: 450px;
        height: 22px;
        line-height: 22px;
        font-size: 16px;
        padding: 8px;
        border: 1px solid #cccccc;
        outline: none;
      }
      .js-suggest {
        width: 466px;
        font-size: 14px;
        border: 1px solid #cccccc;
        background: #ffffff;
        position: absolute;
        left: 0;
        top: 39px;
      }
      .js-suggest.hide {
        display: none;
      }
      .js-suggest ul {
        display: block;
        list-style: none;
        padding: 0;
        margin: 0;
      }
      .js-suggest ul li {
        color: #000;
        font: 14px arial;
        line-height: 25px;
        padding: 0 8px;
        position: relative;
        cursor: default;
      }
      .js-suggest ul li:hover {
        background: #f0f0f0;
      }
    </style>
  </head>

  <body>
    <div class="search">
      <div><input type="text" class="js-input" value="的" /></div>
      <div class="js-suggest">
        <ul>
          <li>根据输入框的值</li>
          <li>从给定字符串数组中筛选出匹配的数据，依次显示在li节点中</li>
          <li>如果没有匹配的数据，请移除所有li节点，并隐藏.js-suggest节点</li>
        </ul>
      </div>
    </div>
    <script type="text/javascript">
        /**
         * 蛮有意思的一道题，很值得一看昂，
         *  其他的没啥，主要是有几个需要注意的点，
         * 特殊字符的转义与所有字符的非贪婪，这是方法上的最重要的点，
         * 如果没有亲自写的小友可能一眼有点疑惑，为啥加俩\\，一个不就是转义了，
         * 这里小友是忽略了字符串本身就会转义呀，就像写文件路径一样的，
         * 还有个点就是别光顾着add hide忘记移除了，这个点漏了可能陷入某个出不来的尴尬情况🤣🤣🤣
         */
      function suggest(items) {
        let input = document.querySelector(".js-input");
        let inputText = input.value;
        //去掉空格
        let inputTextTrim = inputText.trim();
        let suggest = document.querySelector(".js-suggest");

        let ulDom = document.querySelector(".js-suggest ul");

        //清空ul
        while (ulDom.firstChild) {
          ulDom.removeChild(ulDom.firstChild);
        }

        //去掉空格后长度为0隐藏
        if (inputTextTrim.length == 0) {
          suggest.classList.add("hide");
          return;
        } else {
          suggest.classList.remove("hide");
        }

        //拼接特殊字符转义符号与非贪婪标志
        let regText = "";
        const regKey = [
          "(",
          ")",
          ".",
          "?",
          "^",
          "/",
          "\\",
          "*",
          "[",
          "]",
          "|",
          "+",
          "{",
          "}",
          "$",
        ];
        for (charUnit of inputTextTrim) {
          if (regKey.includes(charUnit)) {
            charUnit = "\\" + charUnit;
          }
          regText += charUnit + ".*?";
        }

        //匹配并加入节点
        let reg = new RegExp(regText);
        items.forEach((item) => {
          if (reg.test(item)) {
            let liDom = document.createElement("li");
            liDom.innerHTML = item;
            ulDom.appendChild(liDom);
          }
        });

        //如果节点为空隐藏
        if (ulDom.childNodes.length == 0) {
          suggest.classList.add("hide");
        } else {
          suggest.classList.remove("hide");
        }
      }

      // 测试样例：提交记得注释掉

      let input=document.querySelector(".js-input");
        input.oninput=function(){
          suggest([
          "1",
          "2",
          "3",
          "4",
          "5",
          "6",
          "7",
          "8",
          "9",
          "0",
          "10",
          "110",
        ]);
        }      

      function aaa() {
        var ipt = document.querySelector(".js-input");
        var dv = document.querySelector(".js-suggest");
        var ul = document.querySelector("ul");
        ipt.value = "";
        suggest([
          "1",
          "2",
          "3",
          "4",
          "5",
          "6",
          "7",
          "8",
          "9",
          "0",
          "10",
          "110",
        ]);
        var li = ul.children;
        var result = dv.className.indexOf("hide") >= 0;
        result = result && li.length === 0;
        return result;
      }
      console.log(aaa());
    </script>
  </body>
</html>
